<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>详情</title>
    <link href="css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link rel="stylesheet" href="css/materialdesignicons.min.css" th:href="@{/css/materialdesignicons.min.css}"/>
    <link href="js/jquery-confirm/jquery-confirm.min.css" th:href="@{/js/jquery-confirm/jquery-confirm.min.css}"
          rel="stylesheet">
</head>
<body>
<div class="container-fluid bg-light">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div class="card card-hover-shadow" th:if="${user != null}">
                <header class="card-header">
                    <div class="card-title">好友信息</div>
                </header>
                <div class="card-body">
                    <ul class="list-group list-group-flush text-center">
                        <li class="list-group-item">
                            <img src="images/qq.png" th:src="${user.avatar}" alt="..."
                                 width="100" height="100" class="img-avatar mr-3">
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">昵称</span>
                            <span class="float-right" th:text="${user.realName}">zhangsan</span>
                        </li>
                        <!--                        <li class="list-group-item">-->
                        <!--                            <span class="float-left">备注</span>-->
                        <!--                            <span class="float-right" th:text="${user.remark}">zhangsan</span>-->
                        <!--                        </li>-->
                        <li class="list-group-item">
                            <span class="float-left">性别</span>
                            <span class="float-right" th:if="${user.gender == '0'}">未知</span>
                            <span class="float-right" th:if="${user.gender == '1'}">男</span>
                            <span class="float-right" th:if="${user.gender == '2'}">女</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">生日</span>
                            <span class="float-right" th:text="${user.birthday}">2002-11-11</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">邮箱</span>
                            <span class="float-right" th:text="${user.email}">123@qq.com</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">电话</span>
                            <span class="float-right" th:text="${user.phone}">1222222222</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">住址</span>
                            <span class="float-right" th:text="${user.address}">湖南长沙</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">介绍</span>
                            <span class="float-right"
                                  th:text="${user.description}">这个人很赖什么都没留下。</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">加入时间</span>
                            <span class="float-right" th:text="${user.createTime}">2024-09-10</span>
                        </li>
                        <li class="list-group-item">
                            <a class="btn btn-primary" href="#" onclick="window.history.back()">返回</a>
                            <a class="btn btn-success" href="#"
                               th:href="@{/content(chatId=${'user-' + session.user.id + '-' + user.id})}">发消息</a>
                            <a class="btn btn-danger" href="#" th:onclick="'deleteFriend('+${user.id}+')'">删除好友</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="card card-hover-shadow" th:if="${group != null}">
                <header class="card-header">
                    <div class="card-title">群聊信息</div>
                </header>
                <div class="card-body">
                    <ul class="list-group list-group-flush text-center">
                        <li class="list-group-item">
                            <img src="images/qq.png" th:src="${group.avatar}" alt="..."
                                 width="100" height="100" class="img-avatar mr-3" id="img">
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">群名称</span>
                            <span class="float-right" th:text="${group.name}">群聊1</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">群备注</span>
                            <span class="float-right" th:text="${group.remark}">群聊1</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">群成员</span>
                            <span class="float-right">
                                <th:block th:each="member: ${group.members}">
                                    <span th:text="${member.realName}">张三</span>
                                </th:block>
                            </span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">群聊创建人</span>
                            <span class="float-right" th:text="${group.createBy}">张三</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">群聊介绍</span>
                            <span class="float-right"
                                  th:text="${group.description}"></span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">群聊创建时间</span>
                            <span class="float-right" th:text="${group.createTime}">2024-09-10</span>
                        </li>
                        <li class="list-group-item">
                            <button class="btn btn-info" onclick="window.history.back()">返回</button>
                            <a class="btn btn-success" href="#"
                               th:href="@{/content(chatId=${'group-' + group.id})}">发消息</a>
                            <a class="btn btn-warning" href="#" th:onclick="'quitGroup('+${group.id}+')'">退出群聊</a>
                            <a class="btn btn-danger" href="#" th:if="${session.user.id == group.createBy}"
                               th:onclick="'deleteGroup('+${group.id}+')'">解散群聊</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" src="js/popper.min.js" th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" src="js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="js/jquery-confirm/jquery-confirm.min.js"
        th:src="@{/js/jquery-confirm/jquery-confirm.min.js}"></script>
<script type="text/javascript">
    // 删除好友
    function deleteFriend(friendId) {
        $.confirm({
            title: '删除好友',
            content: '你确定要删除该好友吗？',
            type: 'red',
            buttons: {
                cancel: {
                    text: '取消',
                },
                confirm: {
                    text: '确认',
                    btnClass: 'btn-danger',
                    action: function () {
                        $.get(`/friend/delete/${friendId}`, function (res) {
                            if (res.code === 200) {
                                $.alert({
                                    title: '成功',
                                    type: 'green',
                                    content: res.message,
                                    onClose: () => window.location.href = '/content'
                                })
                            } else {
                                $.alert({
                                    title: '失败',
                                    type: 'red',
                                    content: res.message,
                                })
                            }
                        })
                    },
                }
            },
        })
    }

    // 退出群聊
    function quitGroup(groupId) {
        $.confirm({
            title: '退出群聊',
            content: '你确定要退出该群聊吗？',
            type: 'red',
            buttons: {
                cancel: {
                    text: '取消',
                },
                confirm: {
                    text: '确认',
                    btnClass: 'btn-danger',
                    action: function () {
                        $.get(`/group/quit/${groupId}`, function (res) {
                            if (res.code === 200) {
                                $.alert({
                                    title: '成功',
                                    type: 'green',
                                    content: res.message,
                                    onClose: () => window.location.href = '/content'
                                })
                            } else {
                                $.alert({
                                    title: '失败',
                                    type: 'red',
                                    content: res.message,
                                })
                            }
                        })
                    },
                }
            },
        })
    }

    // 解散群聊
    function deleteGroup(groupId) {
        $.confirm({
            title: '解散群聊',
            content: '你确定要解散该群聊吗？',
            type: 'red',
            buttons: {
                cancel: {
                    text: '取消',
                },
                confirm: {
                    text: '确认',
                    btnClass: 'btn-danger',
                    action: function () {
                        $.get(`/group/delete/${groupId}`, function (res) {
                            if (res.code === 200) {
                                $.alert({
                                    title: '成功',
                                    type: 'green',
                                    content: res.message,
                                    onClose: () => window.location.href = '/content'
                                })
                            } else {
                                $.alert({
                                    title: '失败',
                                    type: 'red',
                                    content: res.message,
                                })
                            }
                        })
                    },
                }
            },
        })
    }
</script>
</body>
</html>